<template>
    <div ref="horizontalEchartsRef" style="width:100%;height: 100% ;"></div>
</template>
<script setup>
import { getCurrentInstance, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
import "echarts-gl";
import tipImage from '../../assets/images/tooltip.png';
import { formatTipVlaue } from '@/utils';
const { proxy } = getCurrentInstance();

const horizontalEchartsRef = ref();
const props = defineProps({
    seriesData: {
        type: Object,
        required: true
    },
    areaColorFrom: {
        type: String,
        default: '#00FFFF'
    },
    areaColorTo: {
        type: String,
        default: 'rgba(65, 179, 255, 0)'
    },
    unit: {
        type: String,
        default: '人'
    },
    fixed: {
        type: Number,
        default: 1
    },
    currentStep: {
        default: "0"
    }
});

let myChart = null;
let optionsData = props.seriesData;
//监听数据变化，可以做更新图标操作
watch(() => props.seriesData, (val) => {
    // console.log("LineEcharts Change>>>");
    optionsData = val;
    if (myChart) {
        setEchartsOption(myChart, optionsData);
    }
});

onMounted(() => {
    myChart = echarts.init(horizontalEchartsRef.value);
    setEchartsOption(myChart, optionsData);
    proxy.$bus.on('resize', () => {
        myChart.resize();
    })
    // function autoMove() {
    //     // 自动滚动：
    //     timeOut = setInterval(() => {
    //         if (option.dataZoom[0].endValue == props.seriesData.length) {
    //             option.dataZoom[0].endValue = 4;
    //             option.dataZoom[0].startValue = 0;
    //         } else {
    //             option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
    //             option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
    //         }
    //         myChart.setOption(option);
    //         myChart.on('mouseover', stop)
    //         myChart.on('mouseout', goMove)
    //     }, 2000)
    // }
    // //停止滚动
    // function stop() {
    //     clearInterval(timeOut)
    // }
    // //继续滚动
    // function goMove() {
    //     autoMove()
    // }



})
const setEchartsOption = (echart, optionData) => {
    const option = {
        tooltip: {
            // trigger: "axis",
            // axisPointer: {
            //     type: "shadow"
            // },
            // formatter: function (params) {
            //     const item = params[0];
            //     return item.name + ' : ' + item.value;
            // },
            show: true,
            trigger: 'axis',
            padding: [0, 0, 0, 0],
            axisPointer: {
                lineStyle: {
                    width: 0,
                    type: 'solid',
                    color: '#00D1FF'
                }
            },
            backgroundColor: 'transparent',
            borderColor: 'transparent',
            shadowColor: 'transparent',
            formatter: (val) => {
                console.log(val);
                let value = formatTipVlaue(val[0].value, props.fixed);
                return `<div style="width:150px;height:55px; background:url(${tipImage}) no-repeat;background-size:contain;padding:5px 10px;">
                              <p style="font-size:12px;color:rgba(214, 243, 255, 0.9);display:flex;align-items: center ;margin-top:0px">
                                <span>${val[0].name} :&nbsp;</span>
                                <span>${value} ${props.unit}</span>   
                              </p>
                              <p style="font-size:12px;color:rgba(214, 243, 255, 0.9);display:flex;align-items: center; margin-top:5px">
                                <span>时间 :&nbsp;</span>
                                <span>第${props.currentStep}秒</span> 
                              </p>
                         </div>`
            },
        },
        legend: {
            show: false
        },

        grid: {
            top: '2%',
            left: '15%',
            bottom: '10%',
        },
        // 加这块地方重点！！！！！！！
        dataZoom: [
            //滑动条
            {
                yAxisIndex: 0, //这里是从X轴的0刻度开始
                show: true, //是否显示滑动条，不影响使用
                type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                // startValue: 0, // 从头开始。
                // endValue: 9, // 一次性展示8个。
            },
        ],
        xAxis: {
            type: "value",
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false,
                color: "#99C3E5"
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        },

        yAxis: [
            {
                type: "category",
                inverse: true,
                showMinLabel: true,
                showMaxLabel: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisPointer: {
                    label: {
                        show: true
                    }
                },

                data: optionData ? optionData.map(item => item.name) : '',
                axisLabel: {
                    margin: 0,
                    fontSize: 14,
                    color: "#99C3E5"
                }
            },
            // {
            //     type: "category",
            //     inverse: true,
            //     axisTick: "none",
            //     axisLine: "none",
            //     offset: -10,
            //     zlevel: 100,
            //     show: true,
            //     position: "left",
            //     axisLabel: {
            //         show: false,
            //     },
            //     data: optionData.map(item => item.count)
            // }
        ],
        series: [
            // {//百分比
            //     z: 2,
            //     name: "value",
            //     type: "bar",
            //     align: "left",
            //     //   barCategoryGap: '50%',
            //     data: optionData.map(item => item.percent).map((item, i) => {
            //         return {
            //             value: item,
            //             itemStyle: {
            //                 color: {//上面圆柱样式
            //                     colorStops: [
            //                         { offset: 0, color: '#3487FF' },
            //                         { offset: 1, color: '#8BE1FF' }
            //                     ],
            //                 }
            //             }
            //         };
            //     }),
            //     label: {
            //         show: true,
            //         position: "right",
            //         color: "#fff",
            //         fontSize: 12,
            //         formatter: function (value) {
            //             let val = (value && value.data && value.data.value) || 0;
            //             return parseFloat(val);
            //         }

            //     }
            // },
            {//数量
                z: 2,
                name: "value",
                type: "bar",
                align: "left",
                barCategoryGap: '75%',//柱间距，间距越大，柱越细
                data: optionData
                    .map(item => item.count)
                    .map((item) => {
                        return {
                            value: item,
                            itemStyle: {
                                color: {
                                    colorStops: [
                                        { offset: 0, color: '#4B9F73' },
                                        { offset: 1, color: '#3AEFAE' }
                                    ],
                                }
                            }
                        };
                    }),
                label: {
                    show: true,
                    position: "right",
                    color: "#99C3E5",
                    fontSize: 12,
                    formatter: function (value) {
                        let val = (value && value.data && value.data.value) || 0;
                        return parseFloat(val);
                    }
                }
            }
        ]
    };
    echart.setOption(option, {
        notMerge: false,
        lazyUpdate: true
    });
}
</script>
<style scoped></style>